<template>
  <div>
    <div class="biaoti">
      <p>
        <span>待激活</span>
        <span>运营中</span>
        <span>已过期</span>
      </p>
      <p>
        <span>全部</span>
      </p>
    </div>
    <div class="top">
      <p class="inp">
        商品名称 ：
        <input type="text" placeholder="请输入" v-model="fromInput.mohuInput" />
        <el-button
          type="primary"
          :loading="false"
          @click="mohu(fromInput.mohuInput)"
          >搜索</el-button
        >
      </p>
    </div>
    <div class="bod">
      <div class="annui">
        <button class="del" @click="del()">删除</button>
        <button class="add" @click="add()">
          <el-icon><Plus /></el-icon>
          新增
        </button>
      </div>
      <div class="tab">
        <el-table
          :data="arr"
          height="55vh"
          style="width: 100%"
          :cell-style="{ padding: '20px 0' }"
          highlight-current-row
          @selection-change="Change()"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="discountName" label="名称" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="faceValue" label="面值" />
          <el-table-column prop="fullDecrement" label="消费满减" />
          <el-table-column prop="pickableQuantity" label="可领数量" />
          <el-table-column prop="numberOfIssues" label="发行数量" />
          <el-table-column prop="remainingQuantity" label="剩余劵" />
          <el-table-column prop="scopeOfAction" label="新用户" />
          <el-table-column prop="state" label="状态" />
          <el-table-column prop="effectiveDate" label="生效时间" />
          <el-table-column prop="expirationDate" label="过期时间" />
          <el-table-column
            prop="guoqi"
            label="操作"
            fixed="right"
            width="120"
            align="center"
          >
            <template #default="scope">
              <button class="compile" @click="betail">
                <el-icon><MoreFilled /></el-icon>
              </button>
              <button class="deleter" @click="deleter(scope)">
                <el-icon><Delete /></el-icon>
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <!-- <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :small="small"
          :disabled="disabled"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="100"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        /> -->
      </div>
    </div>
    <div>
      <Chouti ref="shiyan" title="优惠券新增" size="40%">
        <Discount1></Discount1>
      </Chouti>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import Chouti from "@/components/chouti.vue";
import Discount1 from "./discount1.vue";
import { discountQuery, discountDel, discountList } from "@/Api/YGM/api";
import { hinit, xiaoxi } from "../../components/Hint.js";

const router = useRouter();

const fromInput = reactive({
  mohuInput: "",
});

const arr = ref([]);

const type = ref(null);

const state = ref(null);

const shiyan = ref(null);

discountQuery().then((res) => {});

discountList().then((res) => {
  res.data.data.items.forEach((item) => {
    if (item.type == 1) {
      type.value = "满减";
    } else if (item.type == 2) {
      type.value = "折扣";
    }

    if (item.state == 1) {
      state.value = "发行中...";
    } else if (item.state == 2) {
      state.value = "已过期";
    }

    arr.value.push({
      id: item.id,
      discountName: item.discountName,
      type: type.value,
      faceValue: item.faceValue,
      fullDecrement: item.fullDecrement,
      pickableQuantity: item.pickableQuantity,
      numberOfIssues: item.numberOfIssues,
      remainingQuantity: item.remainingQuantity,
      scopeOfAction: item.scopeOfAction,
      state: state.value,
      effectiveDate: item.effectiveDate,
      expirationDate: item.expirationDate,
    });
  });
});

// 页面跳转到详情页
function betail() {
  router.push("/discount/Detail");
}

// 打开抽屉
function add() {
  shiyan.value.open();
}

// 删除提示框
function deleter(index) {
  discountDel(index.row.id).then((res) => {});

  arr.value.shift(index, 1);
}

function Change() {}

// 模糊查询搜索
function mohu(text) {
  discountList(text).then((res) => {});
}
</script>

<style scoped>
.biaoti {
  margin-top: 16px;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid #666;
  display: flex;
  justify-content: space-between;
}
.biaoti span {
  margin: 0 30px;
  color: #606064;
  cursor: pointer;
}
.biaoti span:hover {
  color: rgb(255, 106, 108);
}

.top {
  height: 76px;
  background-color: white;
  line-height: 76px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 10px;
  margin-top: 16px;
}
input {
  width: 220px;
  height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(246, 246, 246);
  padding-left: 10px;
  margin-right: 41px;
  border-radius: 5px;
}
.inp {
  font-size: 18px;
}
button {
  text-align: center;
  width: 70px;
  height: 36px;
  border-radius: 5px;
  line-height: 36px;
  outline: none;
  border: transparent;
  background-color: rgb(255, 106, 108);
  color: white;
  font-size: 14px;
}
button:hover {
  /* background-color: rgb(255, 106, 108); */
  opacity: 0.8;
}
.bod {
  width: 100%;
  height: 70vh;
  background-color: white;
  margin-top: 16px;
  border-radius: 10px;
  position: relative;
}
.del {
  background-color: blueviolet;
}
.add {
  background-color: #ffa66a;
}
.annui {
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px;
}
.compile {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
}
.compile:hover {
  background-color: rgb(255, 106, 108);
}
.deleter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  background-color: white;
  border: 1px solid #dcdfe6;
  color: #7a7b7f;
  line-height: 40px;
}
.deleter:hover {
  background-color: rgb(255, 106, 108);
}
.bottom {
  position: absolute;
  bottom: 20px;
}
</style>
